<template>
  <div style="padding-right: 20px;">
    <el-form :model="form" label-width="100px">
      <el-form-item label="类型：">
        <el-radio disabled v-model="form.sectionLevel" label="0">版块</el-radio>
        <el-radio :disabled="formStatus === 'edit'" v-model="form.sectionLevel" label="1">栏目</el-radio>
      </el-form-item>
      <el-form-item v-if="form.sectionLevel === '1'" label="所属版块：">
        <el-select :disabled="formStatus === 'edit'" style="width: 100%;" v-model="form.sectionParentId"  placeholder="所属版块">
          <el-option
            v-for="item in modules"
            :key="item.id"
            :label="item.sectionName"
            :value="item.id">
          </el-option>
        </el-select>
        <div @click="openModulechosen" class="mobile-select"></div>
      </el-form-item>
      <el-form-item v-if="form.sectionLevel === '1'" label="栏目名称：">
        <el-input v-model="form.sectionName"></el-input>
      </el-form-item>
      <el-form-item v-if="form.sectionLevel === '0'" label="版块名称：">
        <el-input disabled v-model="form.sectionName"></el-input>
      </el-form-item>
      <el-form-item label="管理员：">
        <el-tooltip popper-class="mobile-tooltip" effect="dark" :disabled="form.managerIds.length === 0" :content="form.sectionManageUsername" placement="bottom">
          <el-input placeholder="请选择" style="width: 180px;" v-model="form.sectionManageUsername" :disabled="true"></el-input>
        </el-tooltip>
        <el-button @click="selectDingUsers('managerIds','sectionManageUsername','sectionManageUserid')">选择</el-button>
      </el-form-item>
      <el-form-item label="发表人：">
        <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointPublisher" :label="false" @change="resetSelect('appointPublisherIds', 'sectionPublisherName', 'sectionPublisher')">所有人员</el-radio>
        <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointPublisher" :label="true" @change="resetSelect('appointPublisherIds', 'sectionPublisherName', 'sectionPublisher')">指定人员</el-radio>
        <el-tooltip popper-class="mobile-tooltip" v-if="form.appointPublisher" class="item" effect="dark" :disabled="form.appointPublisherIds.length === 0" :content="form.sectionPublisherName" placement="bottom">
          <el-input placeholder="请选择" style="width: 180px;" v-model="form.sectionPublisherName" :disabled="true"></el-input>
        </el-tooltip>
        <el-button v-if="form.appointPublisher" @click="selectDingUsers('appointPublisherIds','sectionPublisherName','sectionPublisher')">选择</el-button>
      </el-form-item>
      <el-form-item label="订阅人：">
        <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointSubscriber" :label="false" @change="resetSelect('appointSubscriberIds', 'sectionUsername', 'sectionUserid')">所有人员</el-radio>
        <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointSubscriber" :label="true" @change="resetSelect('appointSubscriberIds', 'sectionUsername', 'sectionUserid')">指定人员</el-radio>
        <el-tooltip popper-class="mobile-tooltip" v-if="form.appointSubscriber" class="item" effect="dark" :disabled="form.appointSubscriberIds.length === 0" :content="form.sectionUsername" placement="bottom">
          <el-input placeholder="请选择" style="width: 180px;" v-model="form.sectionUsername" :disabled="true"></el-input>
        </el-tooltip>
        <el-button v-if="form.appointSubscriber" @click="selectDingUsers('appointSubscriberIds', 'sectionUsername', 'sectionUserid')">选择</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
        formStatus: 'add',
        form: {
          id: '',
          appointPublisher: false,
          appointSubscriber: false,
          sectionLevel: '1',
          sectionManageUserid: '',
          sectionManageUsername: '',
          managerIds: [],
          sectionName: '',
          sectionParentId: '',
          sectionUserid: '',
          sectionUsername: '',
          sectionPublisher: '',
          sectionPublisherName: '',
          appointPublisherIds: [],
          appointSubscriberIds: [],
        },
        formVerify: {
          sectionName: '请输入栏目或版块名称',
          sectionManageUsername: '请选择管理员',
        },
        tableData: [],
        modules: [],
        parentid: ''
      }
    },
    mixins: [dingMixin],
    async mounted(){
      this.mobileSetRightMenu([{id: 'save', text: '保存'}], (directive) => {
        if(directive === 'save'){
          this.addItem()
        }
      });
      this.modules = await this.$httpN.postQ('community/section/list', {'parentid': null})
      let sectionId = this.$route.params.id;
      this.openItemDialog(sectionId)
    },
    methods: {
      openModulechosen() {
        if(this.formStatus === 'edit') return
        let moduleCopy = formUtil.deepCopy(this.modules)
        moduleCopy.forEach((item) => {
          item.key = item.sectionName;
          item.value = item.id;
        })

        this.mobileChosen(moduleCopy, moduleCopy[0].key,(data) => {
          this.form.sectionParentId = data.value;
        })
      },
      selectDingUsers(ids, name, idsStr){
        this.complexPicker(300, [], this.form[ids]).then((data)=>{
          this.form[ids] = data.map(item => item.emplId);
          let names = data.map(item => item.name);
          this.form[name] = names.join(',');
          this.form[idsStr] = this.form[ids].join(',')
        })
      },
      resetSelect(ids, name, idsStr) {
        this.form[ids] = [];
        this.form[name] = '';
        this.form[idsStr] = '';
      },
      async addItem() {
        this.form.sectionName = this.form.sectionName.trim()
        if(!formUtil.verifyData(this.form, this.formVerify)) return;
        if(!this.form.sectionParentId && this.form.sectionLevel === '1') return this.$message.error('请选择版块')
        if(this.form.sectionName.length > 8) return this.$message.error('栏目名称长度不能超过8个字')
        let postForm = {
          sectionLevel: this.form.sectionLevel,
          sectionManageUserid: this.form.sectionManageUserid,
          sectionManageUsername: this.form.sectionManageUsername,
          sectionName: this.form.sectionName,
          sectionParentId: this.form.sectionParentId,
          sectionUserid: this.form.sectionUserid,
          sectionUsername: this.form.sectionUsername,
          sectionPublisher: this.form.sectionPublisher,
          sectionPublisherName: this.form.sectionPublisherName,
        }
        if(this.formStatus === 'edit') postForm.id = this.form.id;
        if(!await this.$httpN.postB(this.formStatus === 'add' ? 'community/section/save': 'community/section/update', postForm)) return;
        this.mobileMessage('保存成功');
        this.$router.go(-1);
        window.MOBILE_NEEDREFRESH = true;
      },
      async openItemDialog(id) {
        if(id) {
          let section = await this.$httpN.get('community/section/info/' + id);
          section.appointPublisher = section.sectionPublisherName !== '';
          section.appointSubscriber = section.sectionUsername !== '';
          section.appointSubscriberIds = section.sectionUserid.split(',');
          section.appointPublisherIds = section.sectionPublisher.split(',');
          section.managerIds = section.sectionManageUserid.split(',');
          section.sectionLevel = section.sectionLevel + '';
          this.form = section;
          this.formStatus = 'edit'
        }else {
          formUtil.resetData(this.form);
          this.form.sectionLevel = '1';
          this.formStatus = 'add'
        }
      }
    }
  }
</script>

<style lang="scss">
  .mobile-tooltip{
    max-width: 60%;
  }
  .mobile-select{
    position: absolute;
    right:0;
    top: 0;
    width: 100%;
    height: 36px;
  }
</style>